{% extends "enterprise/base.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/images/skin/minimal/blue.css">
    <link rel="stylesheet" type="text/css" href="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/js/dojo/dijit/themes/claro/claro.css">
{% endblock %}

{% block content %}
<script type="text/javascript">
    var primary_menu = "menu_0";
    var sub_menu = "menu_0_1";
</script>

    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h3>地理位置</h3>
                </div>
                <!-- <div class="panel-title">
                    <label >企业地图中心点经度</label>
                        <input name="geo_x" id="geo_x" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div>
                <div class="panel-title">
                    <label >企业地图中心点纬度</label>
                    <input name="geo_x" id="geo_y" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div> -->

                <div class="panel-options">
                <a href="/basic/mapEdit/" class="bg"><button type="button" class="btn btn-info">编辑企业边界</button></a>
                </div>
            </div>


            <div class="panel-body" style="padding: 0px">
                <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:500px;">
                    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:500px;">
                        <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>
                    </div>
                </div>
                <div class="mapEdit">
                    <div class="panel panel-primary panel-collapse">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h4 class="heading">企业地图展示</h4>
                            </div>
                            <div class="panel-options" style="margin:4px 0px;">
                                <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            </div>
                        </div>
                        <!-- panel body -->
                        <div class="panel-body">
                            <div class="">
                                <span>选择要展示的信息</span>
                            </div>
                            <hr/>
                            <div class="">
                                <ul>
                                    <li>
                                        <input data='production' checked type="checkbox">
                                        <span>生产区</span>    <!--接着上一行-->
                                    </li>
                                    <li>
                                        <input data='storage' checked type="checkbox">
                                        <span>储罐区</span>    <!--接着上一行-->
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                        <!-- <div class="panel panel-primary panel-collapse" style="height:290px;">
                            <div class="panel-heading">
                                <div class="panel-title tab_choose">
                                    <ul class="tabstitle">
                                        <li id="tab1" class="selected"><h4 class="heading" onmouseover="javascript:view(1);">雷达图</h4></li>
                                        <li id="tab2" class=""><h4 class="heading" onmouseover="javascript:view(2);">企业风险</h4></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="tab_title">
                                <canvas id="top1" height="250" width="250"></canvas>
                            </div>
                            <div class="panel-body" id="top2" style="display: none;">
                                <div class="tab_title">
                                    <div class="left"><b>储存风险</b></div>
                                    <div class="right"><b id='store'>{{ enterprise.storage_level }}</b></div>
                                </div>
                                <div class="tab_title">
                                    <div  class="left"><b>生产风险</b></div>
                                    <div class="right"><b id='produce'>{{ enterprise.production_level }}</b></div>
                                </div>
                                <div class="tab_title">
                                    <div  class="left"><b>运输风险</b></div>
                                    <div class="right"><b>{{ enterprise.transport_level }}</b></div>
                                </div>
                                <div class="tab_title">
                                    <div  class="left"><b>环境受体</b></div>
                                    <div class="right"><b>{{ enterprise.environment_level }}</b></div>
                                </div>
                                <div class="tab_title">
                                    <div  class="left"><b>风险管理</b></div>
                                    <div class="right"><b>{{ enterprise.management_level }}</b></div>
                                </div>
                                <div class="tab_title">
                                    <div  class="left"><b>企业风险</b></div>
                                    <div class="right"><b>{{ enterprise.risk }}</b></div>
                                </div>
                            </div>
                        </div> -->
                    </div>
            </div>
            <div id='_mapData' style='display:none;'>{{ mapData }}</div> <!--显示地图数据-->
            <div class="" id='mapPopHideArea' style="display:none">
                <table class="table table-bordered">
                    <thead>
                        <tr id='_headTr'>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}

<script type="text/javascript" src="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/init.js"></script>
<script type="text/javascript" src="/static/js/icheck.js"></script><!--选择条目 j-->

<script type="text/javascript">
    var e_points = eval('{{ e.points }}');
    var e_center_points = eval('{{ e.centerPoint }}');

    var p_points = eval('{{ p.points }}');
    var p_center_points = eval('{{ p.centerPoint }}');
    var p_extent = '{{ p.extent | safe }}';

    if(p_extent){
        p_extent = JSON.parse(p_extent);
    }

</script>
<script type="text/javascript" src="/static/js/map.action.company.js"></script>

<script language="javascript">
    $(function(){
        $('input[type = checkbox]').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('input[type=checkbox]').bind('ifClicked',function(event){
            var _flag = this.checked;
            var _dataKey = this.getAttribute('data'); 
            var _graphics = mymap.graphics.graphics;
            for(var i=0; i<_graphics.length; i++){
                var _itemGraph = _graphics[i];
                if(_itemGraph.attributes){
                    if( _itemGraph.attributes.name == _dataKey){
                        if(_flag){
                            _graphics[i].hide();
                        }else{
                            _graphics[i].show();
                        }
                    }
                }
            }
        })
    })
    function getNextElement (field) {
        var form = field.form;
        for (var e = 0; e < form.elements.length; e++)
            if (field == form.elements[e])
                break;

        return form.elements[++e % form.elements.length];
    }
    function tabOnEnter (field, evt) {
        var keyCode = document.layers ? evt.which : document.all ?
                evt.keyCode : evt.keyCode;
        if (field.value.length == 1){
            getNextElement(field).focus();
            return false;
        }
    }
</script>
{% endblock %}